<template>
  <div class="http-result-field-config">
	<el-form
		ref="resultFormRef"
		:model="formData"
		:rules="formRules"
		label-width="120px"
		label-position="top"
	>   
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="请求成功响应标识" prop="succField">
          <el-input 
            v-model="formData.succField" 
            placeholder="如: code, status等"
            clearable
          />
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="请求成功响应值类型" prop="succFieldType">
          <el-select
            v-model="formData.succFieldType"
            placeholder="选择值类型"
            style="width: 100%;"
            clearable
          >
            <el-option       
              v-for="option in fieldOptions"
              :key="option.value"
              :label="option.cnLabel"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="请求成功响应值" prop="succValue">
          <el-input 
            v-model="formData.succValue" 
            :placeholder="getSuccessValuePlaceholder(formData.succFieldType)"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="响应数据标识" prop="dataField">
          <el-input 
            v-model="formData.dataField" 
            placeholder="如: data, result等"
            clearable
          />
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="响应数据类型" prop="dataFieldType">
          <el-select
            v-model="formData.dataFieldType"
            placeholder="选择数据类型"
            style="width: 100%;"
            clearable
          >
            <el-option       
              v-for="option in fieldOptions"
              :key="option.value"
              :label="option.cnLabel"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="响应数据模型" prop="dataContentModel">
          <el-input 
            v-model="formData.dataContentModel" 
            placeholder="选择或输入数据模型"
            clearable
          />
        </el-form-item>
      </el-col> 
    </el-row>
	</el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { HttpResultField } from '@/components/DataWorkflow/types/data-collect.ts'
import { DictService } from '@/api/sys/dictApi'
import { FormInstance, FormRules } from 'element-plus'

const props = defineProps<{ 
  data: HttpResultField
}>()

const formData = ref<HttpResultField>({ ...props.data })

const resultFormRef=ref<FormInstance>();

const formRules = reactive<FormRules>({
	succField: [
		{ required: true, message: '请输入接口响应成功字段标识', trigger: 'blur' }
	],
	succFieldType: [
		{ required: true, message: '请选择接口响应成功字段值类型', trigger: 'blur' }
	],
	succValue: [
		{ required: true, message: '请输入接口响应成功字段值', trigger: 'blur' }
	],
	msgField: [
		{ required: true, message: '请输入接口响应状态描述字段标识', trigger: 'blur' }
	],
	dataField: [
		{ required: true, message: '请输入接口响应数据字段标识', trigger: 'blur' }
	],
	dataFieldType: [
		{ required: true, message: '请选择接口响应数据字段类型', trigger: 'blur' }
	],
});

// 选项数据
const fieldOptions = ref<any[]>([])

// 根据类型获取成功值的placeholder
const getSuccessValuePlaceholder = (type: string) => {
  const map: Record<string, string> = {
    'string': '如: success, ok',
    'number': '如: 200, 0',
    'boolean': '如: true',
  }
  return map[type] || '请输入接口响应成功值'
}

// 获取选项数据
const getSelectOptions = async () => {
  try {
    const data = await DictService.getSelectOptions('field-type')
    fieldOptions.value = Array.isArray(data) ? data : []
  } catch (error) {
    console.error('获取选项数据失败:', error)
    fieldOptions.value = []
  }
}

// 监听props变化
watch(() => props.data, (val) => {
  formData.value = { ...val }
}, { immediate: true, deep: true })

// 初始化加载选项
getSelectOptions()

watch(() => props.data, (val: HttpResultField) => {
  formData.value = val || {}
}, { immediate: true, deep: true })

const validate = async (): Promise<boolean> => {
  if (!resultFormRef.value) return false
  try {
    await resultFormRef.value.validate()
    return true
  } catch {
    return false
  }
}

defineExpose({
  validate
})

</script>

<style scoped>
.http-result-field-config {
  padding: 12px;
  border-radius: 4px;
}

.el-row {
  margin-bottom: 16px;
}

.el-form-item {
  margin-bottom: 0;
}
</style>